<template>
  <div class="cooperation">
    <text>手机号</text>
    <view>13269717517<text @click="copyId">复制</text></view>
    <text>微信</text>
    <image :show-menu-by-longpress="true" src="https://statics.lvpaizhijia.com/kefu/kefu.jpg" mode="widthFix" />
    <text class="qrcode">长按识别图中二维码</text>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onLoad, onShow, onHide, onReady, onShareAppMessage } from "@dcloudio/uni-app"
const copyId = () => {
  wx.setClipboardData({
    data: `13269717517`,  // 设置需要复制的内容
    success: function (res) {
      wx.showToast({
        title: '复制成功！',
        icon: 'success',
        duration: 2000
      });
    },
    fail: function (err) {
      wx.showToast({
        title: '复制失败！',
        icon: 'none',
        duration: 2000
      });
    }
  });
}
</script>

<style lang="scss" scoped>
.cooperation {
  width: calc(100% - 64rpx);
  height: 100%;
  margin: auto;

  text {
    font-size: 32rpx;
    color: #222222;
    margin-top: 20rpx;
    font-weight: 600;
    display: block;
  }

  image {
    width: 100%;
    height: auto;
  }

  view {
    font-size: 32rpx;
    margin-top: 20rpx;
    position: relative;

    text {
      padding: 0 10rpx;
      font-size: 30rpx;
      border: 1rpx solid #ccc;
      border-radius: 15rpx;
      // margin-left: 10rpx;
      position: absolute;
      top: -20rpx;
      left: 230rpx;
    }
  }

  .qrcode {
    font-size: 30rpx;
    text-align: center;
    margin: 0;
    color: #222222;
  }
}
</style>